<template>
  <div>
      <el-button type="button" size="small" v-on:click="toadd" plain>增加</el-button>
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="id"
            type="selection"
            label="序号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="简介名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="job"
            label="求职意向">
          </el-table-column>
          <el-table-column
            prop="birthday"
            label="生日">
          </el-table-column>
          <el-table-column
            prop="school"
            label="教育经历">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱">
          </el-table-column>
          <el-table-column
            prop="tel"
            label="电话">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="del(scope.row.id)">删除</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="toupdate(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    <div v-if="addViwe">
    <el-container>
      <el-header>简介管理</el-header>
      <el-container>
        <el-aside width="200px">菜单栏</el-aside>
        <el-container>
          <el-main>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="简介名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="求职意向">
                <el-select v-model="form.job" placeholder="请选择求职意向">
                  <el-option v-for="j in joblist" v-bind:key="j.id" :label="j.name" v-bind:value="j.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="生日">
                  <el-date-picker type="date" format="yyyy-MM-dd" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="教育经历">
                  <el-checkbox :key="s.id" v-model="school2" v-for="s in schoolList" :label="s.name" >{{s.name}}</el-checkbox>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input type="text" v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input type="text" v-model="form.tel"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="add">立即创建</el-button>
                <el-button @click="no">取消</el-button>
              </el-form-item>
            </el-form>
          </el-main>
          <el-footer>版权所有</el-footer>
        </el-container>
      </el-container>
    </el-container>
      </div>
    <div v-if="updateView">
      用户id:{{form.id}}<br>
      <el-container>
        <el-header>简介管理</el-header>
        <el-container>
          <el-aside width="200px">菜单栏</el-aside>
          <el-container>
            <el-main>
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="简介名称">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="求职意向">
                  <el-select v-model="form.job" placeholder="请选择求职意向">
                    <el-option v-for="j in joblist" v-bind:key="j.id" :label="j.name" v-bind:value="j.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="生日">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="教育经历">
                  <el-checkbox :key="s.id" v-model="school2" v-for="s in schoolList" :label="s.name" >{{s.name}}</el-checkbox>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="form.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input type="text" v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                  <el-input type="text" v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="update">立即创建</el-button>
                  <el-button @click="noupdate">取消</el-button>
                </el-form-item>
              </el-form>
            </el-main>
            <el-footer>版权所有</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ResumeView',
  data () {
    return {
      updateView: false,
      addViwe: false,
      school2: [],
      schoolList: [{ id: 1, name: '硕士' }, { id: 2, name: '本科生' }, { id: 3, name: '研究生' }],
      joblist: [{ id: 1, name: '职员' }, { id: 2, name: '业务员' }, { id: 3, name: '程序员' }, { id: 4, name: '管理员' }],
      form: {
        tel: '',
        birthday: '',
        school: ''
      },
      tableData: []
    }
  },
  methods: {
    update () {
      this.axios.post('/student/update', this.form).then(res => {
        if (res.data.code === 200) {
          alert('修改成功')
          this.query()
        } else {
          alert('修改失败' + res.data.code)
        }
      })
      this.updateView = false
    },
    toupdate (student) {
      this.updateView = true
      this.school2 = new Array(0)
      student.school.split(',').forEach(x => {
        this.school2.push(x)
      })
      this.form = JSON.parse(JSON.stringify(student))
    },
    noupdate () {
      this.updateView = false
    },
    toadd () {
      this.addViwe = true
    },
    add () {
      this.form.school = this.school2.toString()
      this.axios.post('/student/add', this.form).then(res => {
        if (res.data.code === 200) {
          this.$message.success('增加成功')
          this.$router.push('form')
          this.query()
        } else {
          this.$message.error('增加失败')
        }
      })
      this.addViwe = false
    },
    no () {
      this.addViwe = false
    },
    query () {
      this.axios.get('/student/list', {
        page: 1,
        pageSize: 20
      }).then(res => {
        this.tableData = res.data
      })
    },
    del (id) {
      this.axios.get('/student/del', { params: { id: id } }).then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.data.code === 200) {
          alert('删除成功')
          this.query()
        } else {
          alert('删除失败' + res.data.code)
        }
      })
    }
  },
  created () {
    this.query()
  }
}
</script>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
